<template>
  <div
    class="relative h-screen bg-white dark:bg-zinc-800 text-center xl:bg-zinc-200"
  >
    <headerImg></headerImg>
    <!-- 表单区域 -->
    <div
      class="block px-3 mt-4 dark:bg-zinc-800 xl:bg-white xl:w-[388px] xl:dark:bg-zinc-900 xl:m-auto xl:mt-8 xl:py-4 xl:rounded-sm xl:shadow-lg"
    >
      <h3
        class="mb-2 font-semibold text-base text-main dark:text-zinc-300 hidden xl:block"
      >
        账号登录
      </h3>
      <vee-form @submit="onSubmit">
        <vee-field
          class="dark:bg-zinc-800 dark:text-zinc-400 border-b-zinc-400 border-b-[1px] w-full outline-0 pb-1 text-base fcous:border-b-main dark:focus:border-b-zinc-200 xl:dark:bg-zinc-900"
          name="username"
          type="text"
          placeholder="用户名"
          autocomplete="on"
          :rules="validateUsername"
          v-model="loginInfo.username"
        />
        <vee-error-message
          name="username"
          class="text-sm text-red-600 block mt-0.5 text-left"
        ></vee-error-message>
        <vee-field
          class="dark:bg-zinc-800 dark:text-zinc-400 border-b-zinc-400 border-b-[1px] w-full outline-0 pb-1 text-base fcous:border-b-main dark:focus:border-b-zinc-200 xl:dark:bg-zinc-900"
          name="password"
          type="password"
          placeholder="密码"
          autocomplete="on"
          :rules="validatePassword"
          v-model="loginInfo.password"
        />
        <vee-error-message
          name="password"
          class="text-sm text-red-600 block mt-0.5 text-left"
        ></vee-error-message>
        <div class="pt-1 pb-3 leading-[0px] text-right" @click="onRegist">
          <a
            class="inline-block p-1 text-zinc-400 text-right dark:text-zinc-600 hover:text-zinc-400 text-sm duration-400 cursor-pointer"
            >去注册</a
          >
        </div>
        <m-button
          class="w-full dark:bg-zinc-900 xl:dark-bg-zinc-800"
          :loading="laoding"
          >登录</m-button
        >
      </vee-form>
      <!-- 第三方登录 -->
      <div class="flex justify-around mt-4">
        <!-- qq -->
        <m-svg-icon class="w-4 cursor-pointer" name="qq"></m-svg-icon>
        <!-- 微信 -->
        <m-svg-icon class="w-4 cursor-pointer" name="wexin"></m-svg-icon>
      </div>
    </div>
    <!-- 人类行为验证 -->
    <sliderCaptcha
      v-if="isSliderCaptchaVisiable"
      @close="isSliderCaptchaVisible = false"
      @success="onCaptchaSuccess"
    ></sliderCaptcha>
  </div>
</template>
<script setup>
import headerImg from '../components/header.vue'
import sliderCaptcha from './sliderCaptcha.vue'
import {
  Form as veeForm,
  Field as veeField,
  ErrorMessage as veeErrorMessage
} from 'vee-validate'
import { validateUsername, validatePassword } from '../validate'
import { LOGING_TYPE_USERNAME } from '@/constants'
import { ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
const router = useRouter()
const store = useStore()
const isSliderCaptchaVisiable = ref(false)
const onSubmit = () => {
  isSliderCaptchaVisiable.value = true
}
const laoding = ref(false)
const onCaptchaSuccess = async () => {
  isSliderCaptchaVisiable.value = false
  onLoding()
}
const loginInfo = ref({
  username: 'LGD_sunday',
  password: '123123'
})
const onLoding = async () => {
  laoding.value = true
  try {
    await store.dispatch('user/setToken', {
      loginType: LOGING_TYPE_USERNAME,
      ...loginInfo.value
    })
  } finally {
    laoding.value = false
  }
  router.push('/')
}
const onRegist = () => {
  store.commit('app/changeRouterType', 'push')
  router.push('/register')
}
</script>
